<template>
  <el-container>
    <el-main>
      <div class="sa-flex sa-col-center sa-row-center sa-p-30">
        <el-image style="width: 300px; height: 300px" :src="state.url" :fit="'cover'" />
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import {api} from '../../outline.service'

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  const state = reactive({
    url:null
  })

  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const { error, data } = await api.qrcode();

    if (error === 0) {
      console.log(data);
      state.url = data.url;
    }
  };
</script>

<style scoped lang="scss">
  .goods-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
  }
</style>
